<template>
    <div>
        <commpVxeTable
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         @checkboxChange="checkboxChange"
         ref="questionnaireManagementRef"
         @searchEvent="searchEvent"
         @resetEvent="resetEvent"
         >
            <template v-slot:fqyfzr_default="{row}" data-desc="姓名">
                <span style="padding-right: 21;" v-if="row.fqyfzr&&row.fqyfzr.length == 2">
                    <span v-for="(trem,tI) in row.fqyfzr.split('')" :key="tI" >
                        {{trem}}
                        <span v-if="tI+1 !== row.fqyfzr.split('').length">&nbsp;&nbsp;</span>
                    </span>
                </span>
                <span style="padding-right: 21;" v-else>{{ row.fqyfzr }}</span>
            </template>
            <template v-slot:fsftj_default="{row}">
                <span v-if="row.fsftj == '已提交'" style="color: #1ab348;">已提交</span>
                <span v-if="row.fsftj == '未提交'" style="color: #ed5565;">未提交</span>
            </template>
            <template v-slot:ftxrq_time>
                <a-date-picker v-model:value="formItemData.ftxrq" />
            </template>
            <template v-slot:ftjrq_time>
                <a-date-picker v-model:value="formItemData.ftjrq" />
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item>
                        <a-button class="green-btn" type="primary" @click="viewClick(row)">查看问卷</a-button>
                    </a-form-item>
                    <a-form-item>
                        <a-button class="blue-btn" type="primary" @click="exportClick(row)">下载问卷</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <questionnaire ref="viewRef"/>
    </div>
</template>
<script>
import {myddownMydTemplatepPdfFile} from './service/index'
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import questionnaire from './questionnaire.vue'
import moment from 'moment'
import blobType from '@/common/blobType'
export default {
    components:{
        commpVxeTable,
        questionnaire
    },
    props:{
        fwjlx:{
            type:String,
            default: () => '',
            required:false
        },
    },
    data(){
        return{
            formItem:[
                {
                    label: '事项名称',
                    model: 'fsxmc',
                },{
                    label: '单位名称', //列头显示文字
                    model: 'fgzdw',
                },{
                    label: '提交状态',
                    model: 'fsftj',
                    options:[{value:'已提交',label:'已提交'},{value:'未提交',label:'未提交'}],
                    type:'Select'
                },{
                    label: '联系人',
                    model: 'fqyfzr',
                },{
                    label: '联系电话',
                    model: 'flxdh',
                }
            ],
            dataTableConfig:{
                api: assessCheckApi.mydqueryLjzlMydPageList,
                rowId: 'id',
                paramet:{
                }
            },
            columnsVxe:[
                { 
                    type: 'checkbox',
                    width: 60 ,
                    fixed: 'left'
                },{
                    title: '事项名称', //列头显示文字
                    field: 'fsxmc',
                },{
                    title: '单位名称', //列头显示文字
                    field: 'fgzdw',
                },{
                    title: '联系人', //列头显示文字
                    field: 'fqyfzr',
                    width:105,
                    slots: {
                        // 使用插槽模板渲染
                        default: 'fqyfzr_default',
                    },
                },{
                    title: '联系电话', //列头显示文字
                    field: 'flxdh',
                    width:127,
                },{
                    title: '填写日期', //列头显示文字
                    field: 'ftxrq',
                    width:110,
                },{
                    title:'提交状态',
                    field:'fsftj',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'fsftj_default',
                    },
                    width:85,
                },
                // {
                //     title: '提交日期', //列头显示文字
                //     field: 'ftjrq',
                // },
                {
                    title: '操作',
                    field: 'id',
                    slots: {
                        // 使用插槽模板渲染
                        default: 'operation_btn',
                    },
                    fixed: 'right',
                    width:190,
            }],
            selectedRowKeysArr:[],
            visibleQRQrCode:false,
            formItemData:{
                ftxrq:'',
                ftjrq:'',
            },
            questionnaireId:'',
        }
    },
    watch:{

    },
    mounted(){
        
        
    },
    methods:{
        searchEvent(){//搜索
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                ftxrq:this.formItemData.ftxrq?moment(this.formItemData.ftxrq).format('YYYY-MM-DD') + ' 00:00:00':'',
                ftjrq:this.formItemData.ftjrq?moment(this.formItemData.ftjrq).format('YYYY-MM-DD') + ' 00:00:00':'',
            }
            //console.log(this.dataTableConfig.paramet)
        },
        resetEvent(){//重置
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
            this.formItemData.ftxrq = ''
            this.formItemData.ftjrq = ''

        },
        checkboxChange(val){//获取当前选择的行
            //console.log('当前选择表格',val)
            this.selectedRowKeysArr = []
            val.forEach(item => {
                this.selectedRowKeysArr.push(item.id)
            });
        },
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    deleteBatchWjjbxx({ids:val}).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.$refs.questionnaireManagementRef.searchEvent()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        viewClick(row){
            this.$refs.viewRef.visibleShow = true
            this.$refs.viewRef.getData(row)
        },
        exportClick(row){//下载
            var that = this
            myddownMydTemplatepPdfFile({id:row.id}).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let index = blobType.suffix.indexOf('.pdf')
                    let url = window.URL.createObjectURL(new Blob([data], { type:blobType.type[index] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', '满意度问卷调查表' + '.pdf')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                // }
            })
        },
    }
}
</script>
<style>
.red-btn{
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}
</style>